﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    property: total-records
                page-display [default:10] 
                page-index: current page
                first-label
                last-label 
                border-color
                background-color
                border-hover-color
                text-hover-color
                background-hover-color
                rotate:true/false
    Events: on-change  
</head>
<body>
    <div></div>
    <script>
       
        function createPage($tmp) {
            $tmp.options = {
                count: 50,
                start: 1,
                display: 12,
                border_color: '#BEF8B8',
                text_color: '#68BA64',
                background_color: '#E3F2E1',
                border_hover_color: '#68BA64',
                text_hover_color: 'black',
                background_hover_color: '#CAE6C6',
                rotate: false,
                images: false,
                mouse: 'slide',
                onChange: function (e) {
                    if ($tmp.$a.pageIndex) {
                        $tmp.isNoRepaint = true;
                        $tmp.$pageIndex = e;
                        ngW8.$("$parse")($tmp.$a.pageIndex).assign($tmp.$s, e);
                        $tmp.$s.$apply();
                        $tmp.isNoRepaint = false;
                    }
                    if ($tmp.$a.onChange) {
                        $tmp.$s.$eval($tmp.$a.onChange);
                    }
                }
            };
            $tmp.$a.$observe("totalRecords", function (v) {
                if (angular.isUndefined(v)) return;
                $tmp.options.count = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$s.$watch("pageIndex", function (v, o) {
                if (angular.isUndefined(v)) return;
                if (v == o) return;
                if ($tmp.isNoRepaint) return;

                $tmp.options.start = v;
                try {
                    $($tmp.$e[0]).paginate($tmp.options);
                }
                catch (e) { }
            });
            $tmp.$a.$observe("pageDisplay", function (v) {
                if (angular.isUndefined(v)) return;
                $tmp.options.display = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("border", function (v) {
                if (angular.isUndefined(v)) return;
                $tmp.options.border = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            if ($tmp.$a.instance) {
                ngW8.$("$parse")($tmp.$a.instance).assign($tmp.$s, $tmp);
            }
            $tmp.$a.$observe("firstLabel", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.firstLabel = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("lastLabel", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.lastLabel = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("borderColor", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.border_color = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("backgroundColor", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.background_color = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("borderHoverColor", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.border_hover_color = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("textHoverColor", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.text_hover_color = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("backgroundHoverColor", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.background_hover_color = v;
                $($tmp.$e[0]).paginate($tmp.options);
            });
            $tmp.$a.$observe("rotate", function (v) {

                if (angular.isUndefined(v)) return;
                $tmp.options.rotate = $tmp.$s.$eval(v);
                $($tmp.$e[0]).paginate($tmp.options);
            });

        };
        createPage($tmp);
    </script>
</body>
</html>